<template>
	<view class="item bgf mt20 ml30 mr30 r20 pl30 pr30 useAnimate" 
	v-for="item in data"
	:key="item.id"
	>
		<view class="t-flex between title">
			<view class="c3">订单号：{{item.order_sn}}</view>
			<view class="mainC">{{statusLabel[item.order.status]}}</view>
		</view>
		
		<view class="goods t-flex between pt30 pb30">
			<uv-image :src="$str.img(item.order.good_image)" mode="aspectFill"
			width="200rpx"
			height="160rpx"
			radius="20rpx"
			></uv-image>
			<view class="right ml30">
				<view class="f32 c3 bold">
					{{item.order.good_name}}
				</view>
				<view class="f32 bold price">
					<text class="prc mr20">￥{{item.order.payamount}}</text>
				</view>				
			</view>
		</view>
		<view class="c9 pb30">
			{{$time(item.createtime,5)}}
		</view>
	</view>
	<empty msg="暂无购买记录" v-if="!data.length"></empty>
	<view class="bpad"></view>
</template>

<script setup>
	import { onLoad,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app"
	import { usePaging } from "../../../lib/ts/util";
	
	let {
		data,
		reload,
		getMore
	} = usePaging('/api/master/GetFyInfo')
	
	onLoad((options)=>{
		user_id = options.id
		reload({user_id})
	})
	onPullDownRefresh(()=>{
		reload({user_id})
	})
	onReachBottom(()=>{
		getMore({user_id})
	})
	
	let user_id = 0
	let statusLabel = ['待付款','待服务','待评价','支付取消','待服务取消','已评价']
	
	
	
</script>

<style scoped lang="scss">
	.title{
		padding: 30rpx 0;
		border-bottom: 2rpx solid #F5F5F5;;
	}
	.goods{
		.right{
			width: calc(100% - 230rpx);
		}
		.price{
			margin-top: 40rpx;
			.prc{
				color: #FF1616;
			}
			.mprc{
				color: #BBBBBB;
				font-size: 26rpx;
				text-decoration: line-through;
			}
		}
	}
	

</style>